<template>
	<view>
		<Details></Details>

		<view class="botBut">
			<uni-row gutter="20" class="butBox">
				<uni-col :span="12">
					<up-button @click="goAddwork()" shape="circle" text="+工作记录"></up-button>
				</uni-col>
				<uni-col :span="12">
					<up-button @click="goXiaohao()" shape="circle" text="销号审核"></up-button>
				</uni-col>
			</uni-row>
		</view>


		<uni-popup ref="addworkPopup" background-color="#fff">
			<view class="formBox">
				<uni-section title="新增工作记录" type="line">
					<uni-card :is-shadow="false" margin="2px 10px 10px 10px">
						<uni-forms ref="addworkForm" :rules="addworkRules" :modelValue="addworkFormData"
							label-position="top">
							<uni-forms-item label="记录类型" required>
								<uni-data-checkbox v-model="addworkFormData.type" :localdata="typeList" />
							</uni-forms-item>
							<uni-forms-item label="回访结果" required name="sex" label-width="120">
								<uni-data-checkbox v-model="addworkFormData.sex" :localdata="riskLevel" />
							</uni-forms-item>
							<uni-forms-item label="处理时间">
								<uni-datetime-picker type="datetime" v-model="addworkFormData.datetime" />
							</uni-forms-item>
							<uni-forms-item label="记录内容">
								<uni-easyinput type="textarea" v-model="addworkFormData.introduction"
									placeholder="请输入自我介绍" />
							</uni-forms-item>
							<uni-forms-item label="附件">
							</uni-forms-item>
						</uni-forms>
					</uni-card>

					<uni-row gutter="20" class="butBox">
						<uni-col :span="12">
							<up-button @click="closeAddwork()" shape="circle" text="取消"></up-button>
						</uni-col>
						<uni-col :span="12">
							<up-button @click="submitAddwork()" shape="circle" text="保存"></up-button>
						</uni-col>
					</uni-row>
				</uni-section>
			</view>
		</uni-popup>


		<uni-popup ref="xiaohaoPopup" background-color="#fff">
			<view class="formBox">
				<uni-section title="销号审核" type="line">
					<uni-forms ref="xiaohaoForm" :modelValue="xiaohaoFormData" label-position="top">
						<uni-card :is-shadow="false" margin="2px 10px 10px 10px">
							<uni-forms-item label="申请部门" label-width="120">
								<uni-easyinput v-model="xiaohaoFormData.department" placeholder="请选择申请部门" />
							</uni-forms-item>
							<uni-forms-item label="申请理由">
								<uni-easyinput type="textarea" v-model="xiaohaoFormData.introduction"
									placeholder="请输入申请销号理由" />
							</uni-forms-item>
						</uni-card>
						<uni-card :is-shadow="false" margin="2px 10px 10px 10px">
							<uni-forms-item label="审批结果" label-width="120">
								<uni-data-checkbox v-model="xiaohaoFormData.approve" :localdata="approveList" />
							</uni-forms-item>
							<uni-forms-item label="备注">
								<uni-easyinput type="textarea" v-model="xiaohaoFormData.remark"
									placeholder="请输入申请销号理由" />
							</uni-forms-item>
						</uni-card>
					</uni-forms>
					<uni-row gutter="20" class="butBox">
						<uni-col :span="12">
							<up-button @click="closeXiaohao()" shape="circle" text="取消"></up-button>
						</uni-col>
						<uni-col :span="12">
							<up-button @click="approvalSubmit()" shape="circle" text="提交"></up-button>
						</uni-col>
					</uni-row>
				</uni-section>
			</view>
		</uni-popup>


	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import Details from '@/pages/workspace/components/details.vue'

	// 风险研判
	const addworkPopup = ref(null)
	const addworkForm = ref(null)
	// 打开
	function goAddwork() {
		addworkReset()
		addworkPopup.value.open('bottom')
	}
	// 关闭
	function closeAddwork() {
		addworkReset()
		addworkPopup.value.close()
	}
	const addworkFormData = ref({
		type: 0,
		introduction: '',
		sex: "",
		department: '',
		datetime: ''
	})
	// 重置
	function addworkReset() {
		addworkFormData.value = {
			type: 0,
			introduction: '',
			sex: "",
			department: '',
			datetime: new Date()
		}
	}
	const addworkRules = ref({
		sex: {
			rules: [{
				required: true,
				errorMessage: '预估风险等级不能为空'
			}]
		},
		department: {
			rules: [{
				required: true,
				errorMessage: '交办部门不能为空'
			}]
		}
	})
	const typeList = ref([{
		text: '调处记录',
		value: 0
	}, {
		text: '工作记录',
		value: 1
	}])
	const riskLevel = ref([{
		text: '成功',
		value: 1
	}, {
		text: '不成功',
		value: 0
	}])

	function submitAddwork() {
		addworkForm.value.validate().then(res => {
			console.log('success', res);
			uni.showToast({
				title: `校验通过`
			})
		}).catch(err => {
			console.log('err', err);
		})
	}


	// 申请销号
	const xiaohaoPopup = ref(null)

	function goXiaohao() {
		xiaohaoPopup.value.open('bottom')
	}

	function closeXiaohao() {
		xiaohaoPopup.value.close()
	}
	const xiaohaoFormData = ref({
		introduction: '',
		department: '',
		approve: '',
		remark: ''
	})
	const approveList = ref([{
		text: '通过',
		value: 1
	}, {
		text: '不通过',
		value: 0
	}])
	function approvalSubmit(){
		console.log(xiaohaoFormData.value)
	}
	
</script>

<style scoped>
	.botBut {
		width: 100%;
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 2;
	}

	.butBox {
		padding: 10px;
	}

	.formBox {
		background-color: #fff;
	}
</style>